<template>
    <div>
        <van-nav-bar
                title="我的订单"
                left-arrow
                :fixed="true"
                class="my-nav"
                @click-left="$router.back(-1)"
                :z-index="100"
        />
        <div style="margin-top: 50px;margin-bottom: 60px;">
            <van-row style="font-size: 14px; ">

                <van-tabs v-model="active">
                    <van-tab title="全部">
                        <div>
                            <van-panel title="金怡华" status="2018-09-28 18:45" v-for="aOrder in allOrders">
                                <van-nav-bar slot="header" style="color: #666">
                                    <div slot="left">
                                        <van-icon name="shop" style="color:red;margin-right: 15px"/>
                                        {{aOrder.commodity_name}}
                                    </div>
                                    <div slot="right" style="font-size: small">
                                        {{aOrder.order_form_data}}
                                    </div>
                                </van-nav-bar>
                                <div @click="orderDetail(aOrder.order_form_number)">
                                    <van-panel :title="'订单号: '+aOrder.order_form_number"
                                               :status="aOrder.payment_status">
                                        <van-card v-for="good in aOrder.goods"
                                                  :title="good.title"
                                                  :desc="good.standard"
                                                  :num="good.count"
                                                  :price="good.price"
                                                  :thumb="good.thumb"
                                        />
                                        <div slot="footer" class="van-clearfix" style="color: #666">
                                            <div style="float: right;font-size: small">
                                                收货人: {{aOrder.receiver}} &nbsp;&nbsp;合计 : <span style="color:red;">￥{{aOrder.total_price}}</span>
                                                (含运费{{aOrder.freight}})
                                            </div>
                                        </div>
                                    </van-panel>
                                </div>
                                <div slot="footer" class="van-clearfix" style="color: #666">
                                    <div style="float: right">
                                        <van-button size="small" @click="$router.push('home')">再次购买</van-button>
                                    </div>
                                </div>
                            </van-panel>
                        </div>


                    </van-tab>
                    <van-tab title="已付款">
                        <div>
                            <van-panel title="金怡华" status="2018-09-28 18:45" v-for="pOrder in paidOrders">
                                <van-nav-bar slot="header" style="color: #666">
                                    <div slot="left">
                                        <van-icon name="shop" style="color:red;margin-right: 15px"/>
                                        {{pOrder.commodity_name}}
                                    </div>
                                    <div slot="right" style="font-size: small">
                                        {{pOrder.order_form_data}}
                                    </div>
                                </van-nav-bar>
                                <div @click="orderDetail(pOrder.order_form_number)">
                                    <van-panel :title="'订单号: '+pOrder.order_form_number">
                                        <van-card v-for="good in pOrder.goods"
                                                  :title="good.title"
                                                  :desc="good.standard"
                                                  :num="good.count"
                                                  :price="good.price"
                                                  :thumb="good.thumb"
                                        />
                                        <div slot="footer" class="van-clearfix" style="color: #666">
                                            <div style="float: right;font-size: small">
                                                收货人: {{pOrder.receiver}} &nbsp;&nbsp;合计 : <span style="color:red;">￥{{pOrder.total_price}}</span>
                                                (含运费{{pOrder.freight}})
                                            </div>
                                        </div>
                                    </van-panel>
                                </div>
                                <div slot="footer" class="van-clearfix" style="color: #666">
                                    <div style="float: right">
                                        <van-button size="small" @click="$router.push('home')">再次购买</van-button>
                                    </div>
                                </div>
                            </van-panel>
                        </div>
                    </van-tab>
                    <van-tab title="待付款">
                        <div>
                            <van-panel title="金怡华" status="2018-09-28 18:45" v-for="obOrder in obligationOrders">
                                <van-nav-bar slot="header" style="color: #666">
                                    <div slot="left">
                                        <van-icon name="shop" style="color:red;margin-right: 15px"/>
                                        {{obOrder.commodity_name}}
                                    </div>
                                    <div slot="right" style="font-size: small">
                                        {{obOrder.order_form_data}}
                                    </div>
                                </van-nav-bar>
                                <div @click="orderDetail(obOrder.order_form_number)">
                                    <van-panel :title="'订单号: '+obOrder.order_form_number">
                                        <van-card v-for="good in obOrder.goods"
                                                  :title="good.title"
                                                  :desc="good.standard"
                                                  :num="good.count"
                                                  :price="good.price"
                                                  :thumb="good.thumb"
                                        />
                                        <div slot="footer" class="van-clearfix" style="color: #666">
                                            <div style="float: right;font-size: small">
                                                收货人: {{obOrder.receiver}} &nbsp;&nbsp;合计 : <span style="color:red;">￥{{obOrder.total_price}}</span>
                                                (含运费 {{obOrder.freight}})
                                            </div>
                                        </div>
                                    </van-panel>
                                </div>
                                <div slot="footer" class="van-clearfix" style="color: #666">
                                    <div style="float: right">
                                        <van-button size="small" @click="$router.push('home')">再次购买</van-button>
                                    </div>
                                </div>
                            </van-panel>
                        </div>
                    </van-tab>
                    <van-tab title="已确认">
                        <div>
                            <van-panel title="金怡华" status="2018-09-28 18:45" v-for="cOrder in confirmedOrders">
                                <van-nav-bar slot="header" style="color: #666">
                                    <div slot="left">
                                        <van-icon name="shop" style="color:red;margin-right: 15px"/>
                                        {{cOrder.commodity_name}}
                                    </div>
                                    <div slot="right" style="font-size: small">
                                        {{cOrder.order_form_data}}
                                    </div>
                                </van-nav-bar>
                                <div @click="orderDetail(cOrder.order_form_number)">
                                    <van-panel :title="'订单号: '+cOrder.order_form_number"
                                               >
                                        <van-card v-for="good in cOrder.goods"
                                                  :title="good.title"
                                                  :desc="good.standard"
                                                  :num="good.count"
                                                  :price="good.price"
                                                  :thumb="good.thumb"
                                        />
                                        <div slot="footer" class="van-clearfix" style="color: #666">
                                            <div style="float: right;font-size: small">
                                                收货人: {{cOrder.receiver}} &nbsp;&nbsp;合计 : <span style="color:red;">￥{{cOrder.total_price}}</span>
                                                (含运费{{cOrder.freight}})
                                            </div>
                                        </div>
                                    </van-panel>
                                </div>
                                <div slot="footer" class="van-clearfix" style="color: #666">
                                    <div style="float: right">
                                        <van-button size="small" @click="$router.push('home')">再次购买</van-button>
                                    </div>
                                </div>
                            </van-panel>
                        </div>
                    </van-tab>
                </van-tabs>

            </van-row>
        </div>
    </div>

</template>

<script>
    import {listOrders} from '../../api/order'

    export default {
        data() {
            return {
                active:0,
                image: 'http://image-jinyijia1688-com.oss-cn-beijing.aliyuncs.com/goods_c3c2d3def8f6ed8a15e1751c5f6f69c3.jpg',
                orders: {},
                allOrders: [],
                paidOrders: [],
                obligationOrders: [],
                confirmedOrders: []

            };

        },
        methods: {
            orderDetail(code) {
                this.$router.push({path: 'order-details', query: {code: code}});
            }
        },
        mounted() {
            let active = this.$route.query.active
            this.active = active?active:0;
            listOrders(d => {
                if (d) {
                    for (let i of  d.tabs) {
                        if ("全部" == i.name) {
                            this.allOrders = i.order_form
                        }
                        if ("已付款" == i.name) {
                            this.paidOrders = i.order_form
                        }
                        if ("待付款" == i.name) {
                            this.obligationOrders = i.order_form
                        }
                        if ("已确认" == i.name) {
                            this.confirmedOrders = i.order_form
                        }
                    }


                }
            })
        }
    }
</script>

<style lang="less" scoped>

</style>